<template>
  <div id="chart" class="chart"></div>
</template>
<script>
import graph from "./data.js";
import * as echarts from 'echarts'
export default {
  name: "Charts",
  // props: {
  //   chartList: {
  //     type: Object,
  //     required: true,
  //   },
  // },
  watch: {
    chartList: {
      handler(val) {
        this.formatData(val || [], true);
      },
    },
  },
  computed: {
    data () {
      return graph
    },
    option () {
      return  {
        // title: {
        //   text: 'Les Miserables',
        //   subtext: 'Default layout',
        //   top: 'bottom',
        //   left: 'right'
        // },
        // tooltip: {},
        // center: [100, 100],
        
        legend: [
          // {
          //   // selectedMode: 'single',
          //   orient: "vertcial",
          //   left: 10,
          //   top: 10,
          //   data: this.data.categories.map(function (a) {
          //     return a.name;
          //   })
          // },
          // {
          //   // selectedMode: 'single',
          //   data: [1,2,3,4,5]
          // }
        ],
        series: [
          {
            name: '知识图谱',
            type: 'graph',
            layout: 'none',
            data: this.data.nodes,
            links: this.data.links,
            categories: this.data.categories,
            draggable: true,
            // hoverAnimation: true,
            // animation: true,
            // animationDuration: 1500,
            // animationEasingUpdate: "cubicOut",
            roam: true,
            emphasis: {
              disabled: false,
              focus: 'none',
              scale: 1.1,
              // itemStyle: {
              //   // opacity: 1
              //   // color: 'inherit',
              //   // borderColor: '#fff',
              //   // borderWidth: 2,
              //   // shadowColor: 'rgba(0, 0, 0, 0.5)',
              //   // shadowBlur: 10
              // }
              // itemStyle: {
              //   color: new echarts.graphic.LinearGradient(
              //     0, 0, 0, 1,
              //     [
              //       { offset: 0, color: '#FE9E21' },
              //       { offset: 1, color: '#F44336' }
              //     ] // 高亮渐变过渡色
              //   )
              // }
              // label: {
              //   color: 'red'
              // }
            },
            label: {
              position: 'inside',
              show: true,
              padding: 4,
              overflow: "breakAll",
              height: 40,
              width: "100%"
            },
            edgeLabel: {
              position: 'middle',
              show: true,
              color: '#fff',
              // opacity: 0.1,
              formatter ({data}) {
                return data.name
              }
            },
            force: {
              edgeLength: [100 , 400],
              repulsion: 80,
              layoutAnimation : true,
              gravity: 0.001,
            }
          }
        ]
      }
    }
  },
  data() {
    return {
      mode: 1,  //1正常模式  2焦点模式(以某个节点为中心)
      centerNode: {},
    };
  },
  created () {
    
  },
  mounted () {
    window.test = this
    this.initEcharts()
    this.setOption()
  },
  methods: {
    formData () {
    },
    getLinkNode () {
      
    },
    setCenterNode (newNode) {
      if (newNode.id == this.centerNode.id) {
        return
      }
      this.centerNode.fixed = false
      // this.data.nodes[0].fixed = false
      for (let index = 0; index < this.data.nodes.length; index++) {
        const node = this.data.nodes[index];
        if (newNode.id == node.id) {
          node.x = this.myChart._dom.offsetWidth/2
          node.y = this.myChart._dom.offsetHeight/2
          node.fixed = true
          this.centerNode = node
          break;
        }
      }
      this.setOption()
    },
    initEcharts () {
      var chartDom = document.getElementById('chart');
      this.myChart = echarts.init(chartDom);
      this.myChart.on('dblclick', (params) => {
        // 控制台打印数据的名称
        console.log(params);
        // this.centerNode = params.data
        // this.setCenterNode(params.data)
        // params.data.itemStyle = {
        //   color: 'blue'
        // }
        for (let i = 0; i < graph.nodes.length; i++) {
          const node = graph.nodes[i];
          if (node.itemStyle) {
            node.itemStyle.opacity = 0.1
          } else {
            node.itemStyle = {
              opacity: 0.1
            }
          }
          if (node.id == params.data.id) {
            node.itemStyle.opacity = 1
          }
        }
        graph.links.forEach(item => {
          if (item.lineStyle) {
            item.lineStyle.opacity = 0.1
          } else {
            item.lineStyle = {
              opacity: 0.1
            }
          }
        })
        this.myChart.setOption({
          series: {
            data: graph.nodes,
            links: graph.links
          }
        })
        
      });
      this.myChart.on('mouseover', (params,e) => {
        // 控制台打印数据的名称
        
      });
      this.myChart.getZr().on('click', (event) => {
        // 该监听器正在监听一个`zrender 事件`。
        console.log(event)
        // this.myChart.dispatchAction({
        //   type: "highlight",
        //   dataIndex: 1
        // });
        
        if (!event.target) {
          graph.nodes.forEach(item => {
            item.itemStyle.opacity = 1
          })
          graph.links.forEach(item => {
            if (item.lineStyle) {
              delete item.lineStyle.opacity
              // item.lineStyle.opacity = 1
            }
          })
          this.myChart.setOption({
            series: {
              data: graph.nodes,
              links: graph.links
            }
          })
        }
      });
      this.myChart.on('legendselectchanged', (params) => {
        // 获取点击图例的选中状态
        var isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
      });
    },
    setOption() {
     
      // myChart.showLoading();
      // myChart.hideLoading();
      // graph.nodes.forEach(function (node) {
      //   node.symbolSize = 5;
      // });
      // for (let index = 0; index < graph.nodes.length; index++) {
      //   let node = graph.nodes[i]
      //   if () {

      //   }
      // }
      
      this.myChart.setOption(this.option, true);
      
    },    
  },
  beforeDestroy() {},
};
</script>
<style scoped>
.chart {
  height: 100%;
  width: 100%;
  background-color: #2c3e50;
  overflow: hidden;
}
</style>
